<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <BaseInfo :id="personId" />
    <a-alert type="info" :showIcon="true" style="margin-top:20px;">
      <div slot="message">
        截至目前，已访谈<span style="color:#1890FF;"> {{ num }}</span> 次
      </div>
    </a-alert>
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
      :dataSource="pageData" @change="onTableChange">
      <template slot="time" slot-scope="text,record">
        <span v-if="record.intStartTime == null">--</span>
        <span v-else>{{ record.intStartTime }} ~ {{ record.intEndTime }}</span>
      </template>
      <template slot="converConClassification" slot-scope="text,record">
        <span v-if="text == null">{{ record.interviewClassification }}</span>
        <span v-else>{{ text }}</span>
      </template>
      <template slot="interviewNum" slot-scope="text">
        <span>第 {{ text }} 次</span>
      </template>
      <template slot="isNotice" slot-scope="text">
        <span v-if="text == null">--</span>
        <span v-if="text == '1'">已通知</span>
        <span v-if="text == '2'">未通知</span>
      </template>
      <template slot="status" slot-scope="text">
        <span v-if="text == '1'">待录入</span>
        <span v-if="text == '2'">已完成</span>
        <span v-if="text == '3'">已取消</span>
      </template>
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <template v-if="record.status == '1'">
          <a-button @click="onInput(2, record)" type="link" style="padding: 0">谈话录入</a-button>
          <a-divider type="vertical" />
          <a-button @click="onBooking(2, record)" type="link" style="padding: 0">改约</a-button>
          <a-divider type="vertical" />
        </template>
        <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
        <template v-if="record.status == '1'">
          <a-divider type="vertical" />
          <a-button @click="onCancel(record)" type="link" style="padding: 0">取消</a-button>
        </template>
      </template>
    </z-table>
    <BookingModal ref="scheduleModalId" title="访谈预约" @ok="onQuery" />
    <AddInterviewModal ref="addInterviewModalId" @ok="onQuery" />
    <InputDetailModal ref="inputDetailModalId" />
    <BookDetailModal ref="bookDetailModalId" />
    <CancelModal ref="cancelModalId" @ok="onQuery" />
  </a-card>
</template>

<script>
import * as educationTalk from '@/api/sjsk/help/educationTalk.js'
import BaseInfo from '@/views/sjsk/modules/BaseInfo'
import BookingModal from './modules/BookingModal'
import AddInterviewModal from './modules/AddInterviewModal'
import CancelModal from './modules/CancelModal'
import BookDetailModal from './modules/BookDetailModal'
import InputDetailModal from './modules/InputDetailModal'
export default {
  components: {
    BaseInfo,
    BookingModal,
    AddInterviewModal,
    CancelModal,
    BookDetailModal,
    InputDetailModal
  },

  data() {
    return {
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '访谈次数',
          dataIndex: 'interviewNum',
          align: 'center',
          scopedSlots: { customRender: 'interviewNum' },
        },
        {
          title: '访谈分类',
          dataIndex: 'converConClassification',
          align: 'center',
          scopedSlots: { customRender: 'converConClassification' },
        },
        {
          title: '预约时间',
          dataIndex: 'time',
          align: 'center',
          scopedSlots: { customRender: 'time' },
        },
        {
          title: '通知状态',
          dataIndex: 'isNotice',
          align: 'center',
          scopedSlots: { customRender: 'isNotice' },
        },
        {
          title: '录入状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '谈话时间',
          dataIndex: 'talkTime',
          align: 'center',
        },
        {
          title: '操作',
          width: 250,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      num: 0,
      personId: this.$route.query.id
    }
  },
  created() {
    console.log("route1:")
    console.log(this.$route)
    this.getRouter(this.$route.name)
  },
  watch: {
    $route(data) {   //data为当前路由信息
      console.log("route2:")
      console.log(data)
      this.getRouter(data.name)
    }
  },
  methods: {
    getRouter(name) {
      if (name == "educationTalk-record") {
        this.pageFilter.id = this.$route.query.id
        this.pageFilter.type = this.$route.query.type
        this.onQuery()
      }
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      educationTalk.intHistory(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result.list
          this.num = res.result.num
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onBooking(type, record) {
      this.$refs.scheduleModalId.show(type, record)
    },
    onInput(type, record) {
      this.$refs.addInterviewModalId.show(type, record)
    },
    onDetail(record) {
      if (record.status == '2') { //录入完成详情
        this.$refs.inputDetailModalId.show(record)
      } else { //预约，取消详情
        this.$refs.bookDetailModalId.show(2, record)
      }

    },
    onCancel(record) {
      this.$refs.cancelModalId.show(record)
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  position: absolute;
  right: 24px;
  top: 80px;
}
</style>
